<template>
  <div>
    <el-row class="aa1">
      <el-col :span="2">
        <div class="aa2">
          <img src="../assets/logo.png" class="aa5">
        </div>
      </el-col>
      <el-col :span="18">
        <div class="aa3">
          <el-menu
              router
              default-active="activeIndex2"
              mode="horizontal"
              background-color=transparent
              text-color=black
              active-text-color="#ffd04b">
            <div v-for="(item,index) in $router.options.routes" :index="index+''" v-if="item.show" >
              <el-menu-item v-for="(item2,index2) in item.children" :index="item2.path"
                            :class="$route.path==item2.path?'is-active':''"
                            style="display:inline-block "
                            class="aa6"
              >{{item2.name}}</el-menu-item>
            </div>
          </el-menu>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="aa4">
          <el-dropdown trigger="click">
              <span class="el-dropdown-link userinfo-inner">
              <i class="el-icon-user" >{{this.bb}}</i>   <i class="el-icon-caret-bottom"></i></span>
            <el-dropdown-menu slot="dropdown">

              <el-dropdown-item divided @click.native="information">个人信息</el-dropdown-item>

              <el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-col>
    </el-row>
    <router-view></router-view>
  </div>
</template>

<script>
export default {

  data(){
    return{
      bb:null
    }
  },

  methods: {
    information(row){
      this.$router.push('/information')
    },
    logout(row){
      sessionStorage.clear();
      this.$router.push('/login')
    }
  },
  created() {
    var aa=JSON.parse(sessionStorage.getItem("user"));
    this.bb=aa.username;
  }
}
</script>


<style>
.aa1{
  width: 100%;
  height: 58px;
  background: -webkit-linear-gradient(left,white,lightskyblue) no-repeat;
}
.aa2{
  float: left;
  margin-left: 30px;
}
.aa3{
  float: left;
}
.aa4{
  float: right;
  margin-top: 15px;
}
.aa5{
  margin-top: 5px;
  width: 70px;
}
.el-menu-item {
  background-color: transparent  !important;
}

.el-menu-item:hover{
  color: orange !important;
  background-color: #42b983;
}
</style>
